<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="">
<div class="cls">123</div>
<div class="cls">456</div>

<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏

<input type="button" onclick="on()">点击
<input type="button" id="btn">再点击
<script>
  /*
    DOM的使用
        获取Element对象（元素对象）
        常见的HTML Element对象的使用
   */
  //通过id来获取对象
  let elementById = document.getElementById("light");
    // alert(elementById);
  //通过标签名获取对象数组
  let elementsByTagName = document.getElementsByTagName("div");
  // alert(elementsByTagName.length);
  // for (let i = 0; i < elementsByTagName.length; i++) {
  //     alert(elementsByTagName[i]);
  // }
  //通过name属性值获取，返回Element对象数组
  let elementsByName = document.getElementsByName("hobby");
  // alert(elementsByName);
  //通过class属性值获取对象数组
  let elementsByClassName = document.getElementsByClassName("cls");
  // alert(elementsByClassName.length);


  /*
    常见的HTML Element对象的使用
   */
        //修改图片路径使用src
        elementById.src="123";
        //修改style属性
  /*for (let i = 0; i < elementsByTagName.length; i++) {
      elementsByTagName[i].style.color = 'red';
      elementsByTagName[i].innerHTML = "哈哈";
  }*/
    /*
        事件监听
            事件绑定的两种方式
    */
  //第一种，通过HTML标签中的事件属性进行绑定
    function on(){
        alert("我被点了")
    }
    //推荐使用第二种方式
  //第二种方式，使用DOM元素属性绑定
  document.getElementById("btn").onclick = function (){
        alert("我又被点了")
  }
  /*
    HTML常见的事件

   */
</script>
</body>
</html>